<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 网站用户 iframe 框</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiAdmin/dist/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/Font-Awesome-master/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/base.css?v={$version}">
    <script src="/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <style>
        .grid {
            padding: 4px;
        }
        .grid li {
            width: 28px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            border: 1px solid #e6e6e6;
            border-top-color: rgb(230, 230, 230);
            border-right-color: rgb(230, 230, 230);
            border-bottom-color: rgb(230, 230, 230);
            border-left-color: rgb(230, 230, 230);
            margin: 4px;
            text-align: center;
            border-radius: 1px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            float: left;
            list-style: none;
        }
        .grid li:hover {
            background: #1E9FFF;
            color: #fff;
            border-color: #1E9FFF;
        }
        .sizing {
            display: none;
            position: absolute;
            left: 0;
            top: 37px;
            width: 100%;
            background: #fff;
            border: 1px solid #D2D2D2;
            border-radius: 0 0 2px 2px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
            height: 246px;
            overflow: auto;
            z-index: 10;
        }
        .icon_search {
            margin: 8px 8px 0;
        }
        .edui-default .edui-editor{
            z-index: 0 !important;
        }
        .images{
            max-width: 200px;
            max-height: 200px;
        }
        .div_input{
            width: 380px;
            margin-right: 20px;
            float: left;
        }
        .div_input div{
            padding:5px;
        }
        .div_input .div_input_div input{
            width: 80px;
            margin-right: 5px;
            /*float: left;*/
        }
        .div_input .div_input_div div{
            float: left;
            position: relative;
            width:80px;
        }
        .div_add{
            margin-left: 10px;
        }
        .div_input_div i{
            position: absolute;top:0px;right:0px;
        }
        .div_a{
            width: 300px;
            float: left;
        }
        .div_b{
            width: 50px;
            float: left;
        }
        .add{
            position: relative;
            top:10px;
        }
        .save{
            margin-left: 200px;
        }

    </style>
</head>
<body>

<div class="layui-form" type="" style="padding: 20px 0 0 0;">
    <div style="margin-left: 120px;margin-bottom: 30px;">
        <button type="button" class="layui-btn layui-btn-primary" lay-href="{:url('index')}">用户社区</button>
        <button type="button" class="layui-btn layui-btn-normal">门店社区</button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="div_input" >
            {foreach $data as $k=>$v}
            <div class="div_man">
                <div class="div_a">
                    <input type="text" name="class_name[{$v.id}]" value="{$v.name}" autocomplete="off" class="layui-input">
                </div>
                <div class="div_b">
                    <button type="button" class="layui-btn delete">删除</button>
                </div>
            </div>
            {/foreach}
        </div>
        <button type="button" class="layui-btn add">添加</button>
    </div>
    <div>
        <button type="submit" class="layui-btn save" lay-submit="" lay-filter="submit">保存</button>
    </div>

    <div class="layui-form-item  layui-hide">
        <input type="button" lay-submit lay-filter="LAY-user-front-submit" id="LAY-user-front-submit" value="确认">
    </div>
</div>
<script>
    window.onunload = function (params) {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                //window.location.href="ad.html";   // 回退时跳转到新页面
                window.history.forward(1);
                alert("不可回退");
            });
        }

        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    }
</script>
<script>

    $(".add").css('margin-top',"{$num}"+'px')
    layui.config({
        base: '/layuiAdmin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'upload','layer','layedit'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload
            , layedit = layui.layedit;
        form.on('submit(submit)', function(data){
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                url:"{:url('index2_ajax')}",
                method:'POST',
                data:data.field,
                success:function(res){
                    if(res.code == 200){
                        layer.msg('保存成功', {
                            icon: 1,
                            time: 1500 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
                            history.go(0);
                        })
                    }else{
                        layer.msg(res.message);
                    }
                }
            })
        });
        $(".div_add").click(function(){
            var id = $(this).attr('data-id');

            var html = '<div>\n' +
                '                    <i class="fa fa-times-circle" aria-hidden="true" style=""></i>\n' +
                '                    <input type="text" name="j_add_name['+id+'][]" autocomplete="off" class="layui-input" >\n' +
                '                </div>';
            $("#div_input_div_"+id).append(html)
            $(".fa-times-circle").click(function(){
                $(this).closest('div').remove();
            })
        })
        $(".fa-times-circle").click(function(){
            $(this).closest('div').remove();
        })
        $(".delete").click(function(){
            $(this).closest('.div_man').remove();
            top = parseInt(top);
           top = (top-48);
            $(".add").css('margin-top',top+'px')
        })
        $(".add").click(function(){
            var top = $(".add").css('margin-top')
            top = parseInt(top);
            top = (top+48);
            $(".add").css('margin-top',top+'px')
            var num = Math.floor(Math.random()*(999999-100000+1)+100000);
            var html = '<div class="div_man">\n' +
                '                <div class="div_a">\n' +
                '                    <input type="text" name="add_class_name['+num+']" autocomplete="off" class="layui-input">\n' +
                '                </div>\n' +
                '                <div class="div_b">\n' +
                '                    <button type="button" class="layui-btn delete">删除</button>\n' +
                '                </div>\n' +
                '            </div>'
            $(".div_input").append(html);
            $(".delete").click(function(){
                $(this).closest('.div_man').remove();
                var top = $(".add").css('margin-top')
                top = parseInt(top);
                top = (top-48);
                $(".add").css('margin-top',top+'px')
            })
            $(".fa-times-circle").click(function(){
                $(this).closest('div').remove();
            })
            $("#div_add_"+num).click(function(){
                var html = '<div>\n' +
                    '                    <i class="fa fa-times-circle" aria-hidden="true" style=""></i>\n' +
                    '                    <input type="text" name="add_name['+num+'][]" autocomplete="off" class="layui-input" >\n' +
                    '                </div>';
                $('#div_input_div_'+num).append(html)
                $(".fa-times-circle").click(function(){
                    $(this).closest('div').remove();
                })
            })
        })

    })
</script>

</body>
</html>